<template>
    <el-menu-item index="5">
        <span @click="handleCheckNotice">查看公告</span>
    </el-menu-item>
    <el-dialog
        v-model="dialogOverflowVisible"
        :title="noticeInfo.title"
        width="500"
        draggable
        overflow
    >
        <div class="dialogContent">
            <p><span>公告发布时间</span>{{ noticeInfo.time }}</p>
            <p><span>公告发布内容</span>{{ noticeInfo.content }}</p>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogOverflowVisible = false"
                    >取消</el-button
                >
                <el-button
                    :plain="true"
                    type="primary"
                    @click="dialogOverflowVisible = false"
                >
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { getNoticeHttp } from "@/request";
import { ElMessage } from "element-plus";

const dialogOverflowVisible = ref(false);

//公告信息
const noticeInfo = ref({});

// 获取公告信息
const handleCheckNotice = () => {
     getNoticeHttp().then((res) => {
        dialogOverflowVisible.value = true;
        // console.log(res);
        noticeInfo.value = getLatestNotice(res.data);
    }).catch((err) => {
        ElMessage.error("获取公告信息失败");
    });
};

// 获取最新公告信息
const getLatestNotice = (noticeArr) => {
    let latestNotice = {};
    //根据时间获取最新公告 时间格式为"2024/9/29 11:18:36"字符串
    //获取事件戳
    let latestTime = new Date("1990/1/1 0:0:0").getTime();
    for (let i = 0; i < noticeArr.length; i++) {
        let timeStamp = new Date(noticeArr[i].time).getTime();
        if (timeStamp > latestTime) {
            latestNotice = noticeArr[i];
            latestTime = timeStamp;
        }
    }
    return latestNotice;
};
</script>

<style scoped>
.dialogContent span {
    font-weight: bold;
    margin-right: 10px;
}
</style>
